<template>
    <el-main>
        <el-form>
            <el-form-item>
                <el-button type="success" :icon="Plus" @click="addMenuBtn" v-permission="17">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableDate.menuList" style="width: 100%" max-height="600px" row-key="id" border
            :tree-props="{ children: 'children' }" default-expand-all>
            <el-table-column prop="title" label="菜单标题" width="160" />
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="icon" label="图标">
                <template #default="scope">
                    <template v-if="scope.row.icon">
                        <el-icon>
                            <component :is="scope.row.icon" />
                        </el-icon>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="urls" label="api正则匹配" width="400" />
            <el-table-column prop="method" label="请求方式" />
            <el-table-column label="是否路由">
                <template #default="scope">
                    <el-switch v-model="scope.row.is_route" inline-prompt active-text="是" inactive-text="否" disabled />
                </template>
            </el-table-column>
            <el-table-column prop="name" label="路由名称" width="120" />
            <el-table-column prop="path" label="路由地址" width="200" />
            <el-table-column prop="component" label="模块" width="300" />
            <el-table-column label="是否菜单">
                <template #default="scope">
                    <el-switch v-model="scope.row.is_menu" inline-prompt active-text="是" inactive-text="否" disabled />
                </template>
            </el-table-column>
            <el-table-column prop="ord" label="排序" />
            <el-table-column fixed="right" width="200" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" type="primary" :icon="Edit" @click="editMenuBtn(scope.row)"
                        v-permission="18">编辑</el-button>
                    <DelBtn @delBtn="delMenuBtn(scope.row)" :permission="19"></DelBtn>
                </template>
            </el-table-column>
        </el-table>
    </el-main>
    <!-- 新增或编辑弹窗 -->
    <MenuAddAndEdit ref="menuRef" :menuParentList="tableDate.menuParentList" @newGetMenuList="getMenuList">
    </MenuAddAndEdit>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

import { Plus, Edit } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus"

import { DialogType } from '@/hooks/useDialog'
import MenuAddAndEdit from './MenuAddAndEdit.vue'
import DelBtn from '@/components/DelBtn.vue'
import { getMenuApi, delMenuApi } from '@/http/api/menu'

// 定义表格数据
const tableDate = reactive({
    menuList: [],
    menuParentList: [{ value: 0, label: '顶级菜单', children: [] },]
})
//获取数据赋值给列表
const getMenuList = async () => {
    await getMenuApi().then((res) => {
        if (res && res.code == 200) {
            tableDate.menuList = res.data
            tableDate.menuParentList[0].children = res.data
        }
    })
}
// 子组件MenuAddAndEdit的ref属性
const menuRef = ref<InstanceType<typeof MenuAddAndEdit>>()
// 添加菜单
const addMenuBtn = () => {
    menuRef.value?.onShow(DialogType.ADD, '添加菜单')
}
// 修改菜单
const editMenuBtn = (editData: any) => {
    menuRef.value?.onShow(DialogType.EDIT, '修改菜单', editData)
}
// 删除菜单
const delMenuBtn = async (delData: any) => {
    if (delData.children && delData.children.length > 0) {
        ElMessage.warning('该菜单下面还有子菜单，不能删除！')
    } else {
        await delMenuApi(delData.id).then(res => {
            if (res && res.code == 204) {
                ElMessage.success('删除成功！')
                getMenuList()
            } else {
                ElMessage.error(res.msg)
            }
        })
    }

}

onMounted(() => {
    getMenuList()
})

</script>

<style scoped lang='scss'>
</style>